<template>
  <div class="box">
    <div class="header">
      <span>西安</span>
      <div class="ipt">| 请输入搜索关键字</div>
      <span>登录</span>
    </div>
    <div class="main">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in bannerList" :key="index"><img :src="item.img" /></van-swipe-item>
      </van-swipe>
      <div class="top10">
        <van-grid :column-num="5" :border="false" :icon-size="35" :gutter="0">
          <van-grid-item v-for="item in navList" :key="item.navid" :icon="item.imgurl" :text="item.title" />
        </van-grid>
      </div>
      <div class="top10">
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </div>
      <div class="top10">
        <ul class="seckill">
          <li v-for="item in seckillList" :key="item.proid">
            <van-image width="60" height="60" :src="item.img1" />
            <p class="active">￥{{ item.originprice }}</p>
          </li>
          <li v-for="item in seckillList" :key="item.proid">
            <van-image width="60" height="60" :src="item.img1" />
            <p class="active">￥{{ item.originprice }}</p>
          </li>
        </ul>
      </div>
      <div class="top10">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <ul :class="isShow ? 'prolist2' : 'prolist1'">
            <li class="van-hairline--bottom van-hairline--right" v-for="(item,index) in prolist" :key="index">
              <img width="100%" :src="item.img1">
              <div>
                <h4>{{ item.proname }}</h4>
                <p>￥{{ item.originprice }}</p>
              </div>
            </li>
            <div class="toggle" @click="isShow = !isShow">
              <van-icon name="bars" v-if="isShow" />
              <van-icon name="apps-o" v-else />
            </div>
          </ul>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import myAxios from "../utils/request";
import Vue from 'vue';
import { Swipe, SwipeItem, Grid, GridItem, CountDown, Image as VanImage, Icon, List } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(CountDown);
Vue.use(VanImage);
Vue.use(Icon);
Vue.use(List);
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      bannerList: [],
      seckillList: [],
      prolist: [],
      time: 24 * 60 * 60 * 1000,
      navList: [
        {
          navid: 1,
          title: "嗨购超市",
          imgurl:
            "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png",
        },
        {
          navid: 2,
          title: "数码电器",
          imgurl:
            "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg",
        },
        {
          navid: 3,
          title: "嗨购服饰",
          imgurl:
            "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg",
        },
        {
          navid: 4,
          title: "嗨购生鲜",
          imgurl:
            "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg.dpg",
        },
        {
          navid: 5,
          title: "嗨购到家",
          imgurl:
            "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg.dpg",
        },
        {
          navid: 6,
          title: "充值缴费",
          imgurl:
            "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg.dpg",
        },
        {
          navid: 7,
          title: "9.9元拼",
          imgurl:
            "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png!q70.jpg.dpg",
        },
        {
          navid: 8,
          title: "领券",
          imgurl:
            "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png!q70.jpg.dpg",
        },
        {
          navid: 9,
          title: "领金贴",
          imgurl:
            "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png!q70.jpg.dpg",
        },
        {
          navid: 10,
          title: "plus会员",
          imgurl:
            "https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png!q70.jpg.dpg",
        },
      ],
      isShow: true,
      count: 1,
      loading: false,
      finished: false,
    }
  },
  methods: {
    onLoad() {
      this.loading = true,
        setTimeout(() => {
          myAxios.get("/pro/list", { params: { count: this.count, limitNum: 12 } }).then((res) => {
            this.loading = false
            if (res.data.data.length == 0) {
              this.finished = true
            } else {
              this.prolist = [...this.prolist, ...res.data.data]
              this.count++
            }
          });
        }, 1000);
    }
  },
  created() {
    myAxios.get("/banner/list").then((data) => {
      // console.log(data.data.data);
      this.bannerList = data.data.data
      // console.log(this.bannerList);
    });

    myAxios.get("/pro/seckilllist").then((res) => {
      console.log(res.data.data);
      this.seckillList = res.data.data
      // console.log(this.seckillList);
    });

    myAxios.get("/pro/list", { params: { count: this.count, limitNum: 12 } }).then((res) => {
      console.log(res.data.data);
      this.prolist = res.data.data
      // console.log(this.seckillList);
    });
  },
}
</script>

<style>
.box .header {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.box .ipt {
  width: 2.5rem;
  height: 0.35rem;
  border: 1px solid #ccc;
  background-color: white;
  border-radius: 20px;
  text-align: center;
  line-height: 00.35rem;
  color: #ccc;
}

.box .header span {
  color: white;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.my-swipe {
  height: 1.8rem;
}

.my-swipe img {
  height: 100%;
}

.top10 {
  margin-top: 0.1rem;
  min-height: 0.2rem;
  background-color: #fff;
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}

.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}

.seckill {
  display: flex;
  justify-content: space-around;
  overflow-x: auto;
}

.active {
  color: red;
}

.prolist1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.prolist1 li {
  width: 49%;
}

.prolist1 li img {
  border: 1px solid gray;
}

.prolist2 li {
  display: flex;
}

.prolist2 li img {
  width: 30%;
  height: 0.8rem;
  border: 1px solid gray;
}

.prolist2 li div {
  flex: 1;
}

.toggle {
  width: .3rem;
  height: .3rem;
  border: 1px solid black;
  border-radius: 50%;
  position: fixed;
  bottom: .5rem;
  right: .2rem;
  text-align: center;
  line-height: .3rem;
}
</style>
